"use client";

import { Link } from "@i18n";
import { useSelectedLayoutSegment } from "next/navigation";
import { useMemo } from "react";

export function TabGroup({
  items,
  className,
}: {
  items: { label: string; href: string; segment: string }[];
  className?: string;
}) {
  const selectedSegment = useSelectedLayoutSegment();
  const activeItem = useMemo(() => {
    return items.find((item) => item.segment === selectedSegment);
  }, [items, selectedSegment]);

  return (
    <div className={` flex border-b-2 ${className}`}>
      {items.map((item) => (
        <Link
          key={item.href}
          href={item.href}
          className={`-mb-[2px] block border-b-2 px-6 py-3 ${
            item === activeItem
              ? "border-primary font-bold"
              : "border-transparent"
          }`}
        >
          {item.label}
        </Link>
      ))}
    </div>
  );
}
